<template>
    <div class="container-layout">
        <el-container>
            <!-- Header -->
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                    @select="handleSelect">
                    <el-menu-item index="0">
                        <img class=" w-36" src="/src/assets/openfeet_logo.png" alt="Element logo" />
                    </el-menu-item>
                    <!-- 分割线 -->
                    <div class="flex items-center justify-center mr-4">
                        <span class=" h-7 w-[1px] bg-gray-200"></span>
                    </div>
                    <div v-for="item in navItems" :key="item.path">
                        <el-menu-item @click="navigateTo(item.path)">
                            <el-icon>
                                <component :is="item.icon" />
                            </el-icon>
                            {{ item.name }}
                        </el-menu-item>
                    </div>
                    <!-- <el-menu-item index="1">
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        {{ item.name }}
                    </el-menu-item> -->
                    <el-menu-item index="2">
                        <el-icon>
                            <VideoCamera />
                        </el-icon>中超</el-menu-item>
                    <el-menu-item index="3">
                        <el-icon>
                            <Football />
                        </el-icon>足球赛程</el-menu-item>
                    <el-menu-item index="4">
                        <el-icon>
                            <TrophyBase />
                        </el-icon>新闻</el-menu-item>
                    <div class="flex items-center ml-auto">
                        <el-input class="w-48 mr-2" v-model="input_msg" placeholder="搜索">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <search />
                                </el-icon>
                            </template>
                        </el-input>
                        <el-menu-item index="5">
                            登录
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-header>
            <!-- Main -->
            <el-main class=" mx-8">
                <div class="live-container h-[640px] flex justify-center space-x-3">
                    <div class=" w-[960px]">
                        <div class="live-video">
                            <!-- 直播画面 -->
                            <el-carousel motion-blur class="h-[480px] rounded-xl">
                                <el-carousel-item v-for="item in carouselItems" :key="item.id" style="height: 480px;">
                                    <img :src="item.src" :alt="item.alt"
                                        class="carousel-image w-full h-full object-fill">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <!-- 直播信息 -->
                        <div class="live-info my-4 font-mono flex justify-between gap-x-2">
                            <div class="flex items-center justify-center w-6 h-auto bg-zinc-400">
                                <el-icon>
                                    <ArrowLeftBold />
                                </el-icon>
                            </div>
                            <div class="live-card grid w-56 h-auto p-2 rounded-md border-2 bg-zinc-200"
                                v-for="(match, index) in matchInfo" :key="index">
                                <div class="title text-base font-bold">{{ match.league }}</div>
                                <div class="flex justify-between items-center text-sm">
                                    <div>{{ match.date }}</div>
                                    <div class=" text-blue-400">{{ match.state }}</div>
                                </div>
                                <div class="mx-2">
                                    <!-- grid mx-2 mt-3 gap-y-1 -->
                                    <div class="flex justify-between items-center"
                                        v-for="(team, teamIndex) in match.teams" :key="teamIndex">
                                        <div>
                                            <el-icon>
                                                <component :is="team.icon" />
                                            </el-icon>
                                            <span>{{ team.name }}</span>
                                        </div>
                                        <p class=" font-bold text-green-500">{{ team.score }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center justify-center w-6 h-auto bg-zinc-400">
                                <el-icon>
                                    <ArrowRightBold />
                                </el-icon>
                            </div>
                        </div>
                    </div>

                    <div class="sidebar  bg-pink-500 border-2 border-indigo-600 h-36 w-64">
                        <!-- 侧边栏内容 -->

                    </div>
                </div>
            </el-main>
            <!-- Footer -->
            <el-footer>Footer
                <h1>中超球队</h1>
                <TeamList />
            </el-footer>
            <el-backtop :right="100" :bottom="100" />
        </el-container>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router'
import TeamList from '@/components/TeamList.vue'

const router = useRouter();
const navigateTo = (path) => {
    router.push(path);
}

const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
}

const input_msg = ref('')
// 导航栏
const navItems = ref([
    { name: '首页', icon: 'Guide', path: '/' },
    { name: '中超', icon: 'VideoCamera', path: '/login' },
    { name: '足球赛程', icon: 'Football', path: '/football-schedule' },
    { name: '新闻', icon: 'TrophyBase', path: '/news' }
])

const carouselItems = ref([
    { id: 1, src: '/src/assets/imgs/1.jpg', alt: 'Image 1' },
    { id: 2, src: '/src/assets/imgs/2.jpg', alt: 'Image 2' },
    { id: 3, src: '/src/assets/imgs/3.jpg', alt: 'Image 3' },
    { id: 4, src: '/src/assets/imgs/4.jpg', alt: 'Image 4' }
])
// 比赛信息
const matchInfo = ref([
    {
        league: '中超',
        date: '04月27日 19:00',
        state: '已结束/回放',
        teams: [
            { icon: 'GobletSquareFull', name: '北部湾青年', score: '4' },
            { icon: 'User', name: '上海海港', score: '0' }
        ]
    },
    {
        league: '中超',
        date: '04月30日 19:00',
        state: '进行中',
        teams: [
            { icon: 'GobletSquareFull', name: '广州豹', score: '4' },
            { icon: 'User', name: '北部湾青年', score: '3' }
        ]
    },
    {
        league: '中乙',
        date: '05月6日 19:00',
        state: '进行中',
        teams: [
            { icon: 'GobletSquareFull', name: '广西联合', score: '2' },
            { icon: 'User', name: '北部湾青年', score: '1' }
        ]
    },
    {
        league: '亚冠',
        date: '06月27日 19:00',
        state: '进行中',
        teams: [
            { icon: 'GobletSquareFull', name: '利雅得胜利', score: '2' },
            { icon: 'User', name: '北部湾青年', score: '3' }
        ]
    }
])

// export default {
//     setup() {
//         return { activeIndex, handleSelect }
//     }
// }

</script>

<style scoped>
/* 覆盖默认样式 */
/* .el-menu--horizontal {
    border-bottom: none; /* 移除底部边框 */
/* } */

/* 自定义悬停效果 */
.el-menu--horizontal .el-menu-item:hover {
    color: #13C903;
    background-color: #fff;
    /* 自定义悬停效果 */
}

.el-menu--horizontal .el-menu-item .is-active {
    background-color: #fff;
    /* 选中时的背景颜色 */
    color: #13C903;
}

/* 走马灯 */
.el-carousel__item img {
    color: #475669;
    opacity: 0.75;
    /* line-height: 800px; */
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>